import React, { Component } from 'react'
import 'antd/dist/antd.css';

import store from './store/index'
import {
    getInputChangeAction,
    getIAddItemAction,
    getIDeleteItemAction, 
    getTodoList
} from './store/actionCreators'

import TodoListUI from './TodoListUI';
 

export default class TodoList extends Component {

    constructor(porps){
        super(porps)
        this.state = store.getState() 
        this.handleChange = this.handleChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
        store.subscribe(this.handleStoreChange)
    }

    componentDidMount(){ 
        const action = getTodoList()  
        store.dispatch(action) 
    }

    render() {
        return (
            <TodoListUI 
                inputValue={this.state.inputValue}
                handleChange = {this.handleChange}
                handleBtnClick = {this.handleBtnClick}
                list = {this.state.list}
                handleItemDelete = {this.handleItemDelete}
                />
        )
    }

    // 获取 表单的值
    handleChange(e){ 
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action) 
    }

    handleStoreChange(){
        this.setState(store.getState())
    }

    handleBtnClick(){
        const action = getIAddItemAction()
        store.dispatch(action)
    }

    handleItemDelete(index){ 
         const action = getIDeleteItemAction(index)
        store.dispatch(action)
    }

}
